//element全局自定义样式修改
[class^="el-"] {
    font-family: "Alibaba-PuHuiTi-Regular", -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

// 所有需要修改element样式的地方，都需要在外层盒子上加上class样式
// 设计了两套表单的样式，所以要用两个父class来框
// 左侧白色字表单样式

.white-form-cus-style {

    // 在单选框组盒子上添加对应的css样式，将单选框分割成对应的部分
    // 左右两块
    .two-part {
        display: grid;
        grid-template-columns: 50% 50%;

        .el-radio {
            // padding-bottom: 10px;
            height: 26px;
            line-height: 26px;
        }

        .el-checkbox {
            height: 26px;
            line-height: 26px;
        }

        .el-checkbox__label {
            width: 103px;
            vertical-align: middle;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    }

    //单选框名称的颜色
    //单选框选中时字的颜色
    //===========================  单选框样式
    .el-radio__label,
    .el-radio__input.is-checked+.el-radio__label {
        color: #FFF;
    }

    // 单选框选中的按钮样式
    .el-radio__inner {
        border: 1px solid #FFF !important;
        background-color: transparent !important;

        &::after {
            width: 7.5px;
            height: 7.5px;
        }
    }

    //===========================




    // 多选框样式
    //多选框框名称的颜色
    //多选框选中时字的颜色
    //==============================  多选框样式
    .el-checkbox__label,
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #FFF;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
        border: 1px solid #FFF;
    }

    .el-checkbox__inner {
        background-color: transparent !important;
        border: 1px solid #FFF;

        &:hover {
            border: 1px solid #FFF;
        }
    }

    .el-checkbox__input.is-checked {
        .el-checkbox__inner {
            background-color: #FFF !important;
            border: 1px solid #FFF !important;
        }
    }

    // 多选框勾样式
    .el-checkbox__inner::after {
        border-color: RGB(8, 24, 54);
    }

    //==============================
}

// 蓝色字表单样式
.blue-form-cus-style {
    //基本色
    --blue-base-color: #149BDA;
    // 基本色的透明色
    --blue-base-color-opacity: RGBA(20, 155, 218, .5);
    // 边框色
    --blue-border-color: #17497D;
    // 时间框的行高，和icon一起修改
    --input-line-height: 30px;



    .el-input__inner {
        background-color: RGBA(13, 42, 91, .7);
        color: var(--blue-base-color);
        border: 1px solid var(--blue-border-color);
        border-radius: 0px;
        line-height: 35px;
        height: var(--input-line-height);

        &:hover {
            border: 1px solid var(--blue-border-color);
        }

        &::placeholder {
            color: var(--blue-base-color-opacity);
        }
    }

    .el-input__icon {
        height: var(--input-line-height);
        line-height: var(--input-line-height);
        color: var(--blue-base-color);
    }
}